<script setup>
import {
    ref,
    computed,
    watch,
    onMounted,
    onUnmounted,
    onBeforeMount,
} from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/index'
import { getDeviceClass } from '@/assets/api/device'
import logo from '@/components/logo.vue'
// import { showLoading } from '@/assets/js/loading'
// import { Sunny, Moon } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const themeColor = ref('#f0f2f5')
const settingDrawer = ref(false)
function onMenuOpen(e) {
    console.log('oepn', e)
}
function onMenuClose(e) {
    // if (e == '/edit') {
    //     let routeUrl = router.resolve({
    //         path: e,
    //     })
    //     window.open(routeUrl.href, '_blank')
    // }
    console.log('close', e)
}
function onMenuSelect(e) {
    // if (e == '/edit' || e == '/realtimeAlarm') {
    //     let routeUrl = router.resolve({
    //         path: e,
    //     })
    //     window.open(routeUrl.href, '_blank')
    //     return
    // }
    router.push(e)
}
const isMenuCollapse = ref(false)
const menuList = ref([
    {
        name: '物联网',
        id: 'iot',
        path: '/dashboard',
        icon: 'iot',
        children: [
            {
                name: '首页',
                id: 'iotHome',
                path: '/iot/home',
                icon: 'home',
            },
            {
                name: '告警中心',
                id: 'iotWarn',
                path: '/iot/warn',
                icon: 'alarm',
            },
            {
                name: '通知管理',
                id: 'iotNotice',
                // path: '/iot/notice',
                icon: 'notice',
                children: [
                    {
                        name: '通知配置',
                        id: 'noticeDispose',
                        path: '/iot/noticeDispose',
                        icon: 'noticeDispose',
                        type: true,
                    },
                ],
            },
            {
                name: '北向输出',
                id: 'northbound',
                icon: 'output',
                children: [
                    // {
                    //     name: '阿里云',
                    //     id: 'northboundAli',
                    //     path: '/iot/northbound/ali',
                    //     icon: 'cloud',
                    // },
                    {
                        name: '数据订阅',
                        id: 'DataFeed',
                        path: '/iot/northbound/DataFeed',
                        icon: 'DataFeed',
                        type: true,
                    },
                ],
            },
        ],
    },
    {
        name: '视频中心',
        id: 'video',
        icon: 'video',
        children: [
            {
                name: '仪表盘',
                id: 'videoDashboard',
                path: '/video/dashboard',
                icon: 'pie',
            },
            {
                name: '视频设备',
                id: 'videoDevice',
                path: '/video/device',
                icon: 'device',
            },
            {
                name: '分屏展示',
                id: 'videoScreen',
                path: '/video/screen',
                icon: 'screen',
            },
            {
                name: '视频分析',
                id: 'videoAnalysis',
                icon: 'analysis',
                type: true,
                children: [
                    {
                        name: '通道配置',
                        id: 'videoAnalysis1',
                        path: '/video/analysis',
                        icon: 'deploy',
                        type: true,
                    },
                    {
                        name: '视频分析数据',
                        id: 'analysisData',
                        path: '/video/analysisData',
                        icon: 'analysisData',
                        type: true,
                    },
                    {
                        name: '实时报警数据',
                        id: 'RealtimeAlarm',
                        path: '/realtimeAlarm',
                        icon: 'realtimeAlarm',
                        type: true,
                    },
                ],
            },
            // {
            //     name: '国标级联',
            //     id: 'videoCascade',
            //     path: '/video/cascade',
            //     icon: 'cascade',
            // },
        ],
    },
    {
        name: '消防中心',
        id: 'fireControl',
        icon: 'fire',
        children: [],
    },
    {
        name: '安防中心',
        id: 'safe',
        icon: 'safe',
        type: 1,
        children: [
            {
                name: '车辆道闸',
                id: 'carGate',
                icon: 'car-gate',
                path: '/safe/carGate/plate',
                children: [
                    {
                        name: '车牌管理',
                        id: 'carList',
                        path: '/safe/carGate/plate',
                        icon: 'plate',
                    },
                    {
                        name: '设备管理',
                        id: 'carList',
                        path: '/safe/carGate/device',
                        icon: 'road-gate',
                    },
                ],
            },
        ],
    },
    {
        name: '能源中心',
        id: 'energy',
        icon: 'energy',
        type: '1',
        children: [],
    },
    {
        name: '组态管理',
        id: 'svg',
        icon: 'svg',
        type: true,
        children: [
            {
                type: true,
                name: '应用列表',
                id: 'applicationList',
                path: '/svg/applicationList',
                icon: 'svgList',
            },
            // {
            //     name: '组态管理',
            //     id: 'svg',
            //     path: '/edit',
            //     icon: 'svg',
            // },
        ],
    },
    {
        name: '系统管理',
        id: 'system',
        icon: 'setting',
        children: [
            {
                name: '系统设置',
                id: 'systemSet',
                path: '/system/set',
                icon: 'system',
            },
            {
                name: '用户设置',
                id: 'systemUser',
                path: '/system/user',
                icon: 'users',
            },
            {
                name: '网络设置',
                id: 'systemUser',
                path: '/system/network',
                icon: 'net',
            },
            // {
            //     type: true,
            //     name: '安全设置',
            //     id: 'systemUser',
            //     path: '/system/safe',
            //     icon: 'setSafe',
            // },
            {
                name: '系统状态',
                id: 'systemUser',
                path: '/system/state',
                icon: 'switches',
            },
            {
                name: '日志管理',
                id: 'systemlog',
                icon: 'systemLog',
                type: true,
                children: [
                    {
                        type: true,
                        name: '报警日志',
                        id: 'alarmLog',
                        path: '/system/alarmLog',
                        icon: 'alarmLog',
                    },
                ],
            },
        ],
    },
    {
        name: '插件商城',
        id: 'pluginmall',
        icon: 'pluginmall',
        type: true,
        children: [
            {
                type: true,
                name: '插件商城',
                id: 'pluginmall',
                path: '/pluginmall/applicationList',
                icon: 'pluginmall',
            },
        ],
    },
])

function getDevice() {
    getDeviceClass({ type: 2 }).then((res) => {
        //后台获取配置菜单消防中心
        const fireControlSubMenu = []
        res.data.forEach((item) => {
            fireControlSubMenu.push({
                name: item.name,
                id: 'fireControl' + item.id,
                path: '/fireControl/' + item.id,
                icon: item.logo,
                children: [
                    {
                        name: '仪表盘',
                        id: 'fireControlHome' + item.id,
                        path: '/fireControl/' + item.id,
                        icon: 'pie',
                    },
                    {
                        name: '设备管理',
                        id: 'fireControlDevice' + item.id,
                        path: '/fireControl/equipment/' + item.id,
                        icon: 'device',
                    },
                    {
                        name: '设备告警',
                        id: 'fireControlAlarm' + item.id,
                        path: '/fireControl/alarm/' + item.id,
                        icon: 'alarm',
                    },
                ],
            })
        })
        const fireControlMenu = menuList.value.find(
            (item) => item.id == 'fireControl'
        )
        fireControlMenu.children = fireControlSubMenu
        //从全部的菜单列表找到id符合的一项并赋值
        getSafeAlam()
        getEnergyMenu()
        sideMenu.value = activeHeaderMenu.value.children
        activeMenu.value = activeHeaderMenu.value.children.find((item) => {
            if (activeHeaderMenu.value.id == 'fireControl') {
                return item.id == `fireControl${route.params.deviceClass}`
            } else if (activeHeaderMenu.value.id == 'energy') {
                return item.id == `energy${route.params.deviceClass}`
            } else if (activeHeaderMenu.value.id == 'safe') {
                return item.id == `safe${route.params.deviceClass}`
            }
            return {}
        })
    })
}
const safeAlam = ref([
    { id: '001', logo: 'transfer', name: '周界报警' },
    { id: '002', logo: 'water', name: '智能门禁' },
])
function getSafeAlam() {
    const safeAlamyMenu = menuList.value.find((item) => {
        return item.id == 'safe'
    })
    safeAlam.value.forEach((item) => {
        safeAlamyMenu.children.push({
            name: item.name,
            id: 'safe' + item.id,
            path: '/safe/alam/dashboard/' + item.id,
            icon: item.logo,
            children: [
                {
                    name: '仪表盘',
                    id: 'safeAlamHome' + item.id,
                    path: '/safe/alam/dashboard/' + item.id,
                    icon: 'pie',
                },
                {
                    name: '设备管理',
                    id: 'safeAlamDevice' + item.id,
                    path: '/safe/alam/device/' + item.id,
                    icon: 'device',
                },
                {
                    name: '设备告警',
                    id: 'safeAlamAlarm' + item.id,
                    path: '/safe/alam/deviceAlarm/' + item.id,
                    icon: 'alarm',
                },
            ],
        })
    })
}
const energy = ref([
    { id: '001', logo: 'transfer', name: '用水管理' },
    { id: '002', logo: 'water', name: '用电管理' },
    { id: '003', logo: 'airCondition', name: '空调管理', type: true },
])
function getEnergyMenu() {
    const energySub = []
    energy.value.forEach((item) => {
        energySub.push({
            name: item.name,
            id: 'energy' + item.id,
            path: '/energy/' + item.id,
            icon: item.logo,
            type: item.type,
            children: [
                {
                    name: '仪表盘',
                    id: 'energyHome' + item.id,
                    path: '/energy/' + item.id,
                    icon: 'pie',
                },
                {
                    name: '设备管理',
                    id: 'energyDevice' + item.id,
                    path: '/energy/device/' + item.id,
                    icon: 'device',
                },
                {
                    name: '设备告警',
                    id: 'energyAlarm' + item.id,
                    path: '/energy/plateAlarm/' + item.id,
                    icon: 'alarm',
                },
            ],
        })
        const energyMenu = menuList.value.find((item) => {
            return item.id == 'energy'
        })
        energyMenu.children = energySub
    })
}
// getDevice()
const activeHeaderMenu = computed(() => {
    const currentPath = route.path.split('/')[1]
    return menuList.value.find((item) => currentPath == item.id)
}) //地址栏取/后的第二项,从全部菜单menulist中查找id和currentPath相同的

const activeMenu = ref({})
watch(route, () => {
    // 监听路由，从侧边栏activeHeaderMenu查找符合条件的作为面包屑二级菜单
    activeMenu.value = activeHeaderMenu.value.children.find((item) => {
        if (activeHeaderMenu.value.id == 'fireControl') {
            return item.id == `fireControl${route.params.deviceClass}`
        } else if (activeHeaderMenu.value.id == 'energy') {
            return item.id == `energy${route.params.deviceClass}`
        } else if (activeHeaderMenu.value.id == 'safe') {
            return item.id == `safe${route.params.deviceClass}`
        }
        return {}
    })
})
const sideMenu = ref([])
watch(
    //
    activeHeaderMenu,
    () => {
        sideMenu.value = activeHeaderMenu.value.children
    },
    {
        deep: true,
        immediate: true,
    }
)
const defaultActive = computed(() => {
    return route.path
})
function changeHeaderMenu(item) {
    if (item.children && item.children[0] !== undefined) {
        router.push(item.children[0].path)
    } else {
        // showLoading()
        router.push(item.path)
    }
}
const winH = ref(400)
function getWinSize() {
    //获取页面高度
    winH.value =
        document.documentElement.clientHeight || document.body.clientHeight
}
getWinSize()
let resizeTimer = null
onBeforeMount(() => {
    getDevice()
})
onMounted(() => {
    window.onresize = () => {
        //窗口大小发生改变就调用
        clearTimeout(resizeTimer)
        resizeTimer = setTimeout(() => {
            getWinSize()
        }, 500)
    }
})
onUnmounted(() => {
    //组件销毁之前执行
    clearTimeout(resizeTimer)
})
// 下拉菜单点击
function onDropMenuClick(command) {
    if (command == 'exit') {
        router.replace('/login')
    } else if (command == 'user') {
        router.replace('/system/set')
    }
}
const userStore = useUserStore()

function exitAction() {
    router.replace('/login')
    userStore.setUserInfo(null)
}
function accessControl(str) {
    return userStore.permission.indexOf(str) != -1
}
const color = ref()
const settingModel = ref(false)
const mix = (color1, color2, weight) => {
    weight = Math.max(Math.min(Number(weight), 1), 0)
    let r1 = parseInt(color1.substring(1, 3), 16)
    let g1 = parseInt(color1.substring(3, 5), 16)
    let b1 = parseInt(color1.substring(5, 7), 16)
    let r2 = parseInt(color2.substring(1, 3), 16)
    let g2 = parseInt(color2.substring(3, 5), 16)
    let b2 = parseInt(color2.substring(5, 7), 16)
    let r = Math.round(r1 * (1 - weight) + r2 * weight)
    let g = Math.round(g1 * (1 - weight) + g2 * weight)
    let b = Math.round(b1 * (1 - weight) + b2 * weight)
    r = ('0' + (r || 0).toString(16)).slice(-2)
    g = ('0' + (g || 0).toString(16)).slice(-2)
    b = ('0' + (b || 0).toString(16)).slice(-2)
    return '#' + r + g + b
}
function colorChange(e) {
    localStorage.setItem('color', e)
    // e就是选择了的颜色
    const pre = '--el-color-primary'
    // 白色混合色
    const mixWhite = '#ffffff'
    // 黑色混合色
    const mixBlack = '#000000'
    const el = document.documentElement
    el.style.setProperty(pre, e)
    // 这里是覆盖原有颜色的核心代码
    for (let i = 1; i < 10; i += 1) {
        el.style.setProperty(`${pre}-light-${i}`, mix(e, mixWhite, i * 0.1))
    }
    el.style.setProperty('--el-color-primary-dark', mix(e, mixBlack, 0.1))
}
if (localStorage.getItem('color')) {
    color.value = localStorage.getItem('color')
    colorChange(color.value)
}
function changeTheme(val) {
    let html = document.documentElement
    if (val) {
        html.className = 'dark'
        themeColor.value = '#000'
        colorChange('#00000')
    } else {
        colorChange('#1d39c4')
        html.className = ''
        themeColor.value = '#f0f2f5'
    }
}
</script>
<template>
    <el-container class="page-layout" :style="{ height: winH + 'px' }">
        <el-header class="page-header">
            <div class="d-flex">
                <logo></logo>
                <h1 class="title ml-5">
                    {{ userStore.systemInfo.gatewayName }}
                </h1>
            </div>

            <el-menu class="header-menu">
                <el-menu-item
                    class="item"
                    :class="{ active: activeHeaderMenu.id == item.id }"
                    v-for="(item, index) in menuList"
                    :key="item.id"
                    :index="index + ''"
                    @click="changeHeaderMenu(item)"
                    :disabled="
                        (userStore.permitCheck == 'no' &&
                            item.name !== '系统管理') ||
                        (item.name == '组态管理' &&
                            !accessControl('configuration_management'))
                    "
                >
                    <el-tooltip
                        content="许可认证失败"
                        placement="bottom"
                        effect="light"
                        :show-arrow="false"
                        :offset="-15"
                        :disabled="
                            userStore.permitCheck == 'yes' ||
                            item.name == '系统管理'
                        "
                    >
                        <i :class="`icon iconf-${item.icon}`" v-if="item.type">
                            <span class="text">{{ item.name }}</span></i
                        >
                        <i :class="`iconfont icon-${item.icon}`" v-else>
                            <span class="text">{{ item.name }}</span></i
                        >
                    </el-tooltip></el-menu-item
                >
            </el-menu>
            <!-- <ul class="header-menu">
                <li
                    class="item"
                    :class="{ active: activeHeaderMenu.id == item.id }"
                    v-for="item in menuList"
                    :key="item.id"
                    @click="changeHeaderMenu(item)"
                >
                    <el-icon size="16">
                        <component :is="item.icon"></component>
                    </el-icon> -->

            <!-- <i :class="`iconfont icon-${item.icon}`"></i>
                    <el-tooltip
                        content="许可认证失败"
                        placement="bottom"
                        effect="light"
                        :offset="4"
                        :show-arrow="false"
                        :disabled="userStore.permitCheck=='yes'"
                    >
                        <span class="text">{{ item.name }}</span>
                    </el-tooltip>
                </li>
            </ul>  -->
            <div class="d-flex">
                <el-popover
                    placement="bottom-start"
                    :width="300"
                    trigger="click"
                >
                    <template #reference>
                        <span class="el-dropdown-link pointer mr-10">
                            <el-icon size="20">
                                <Bell />
                            </el-icon>
                        </span>
                    </template>
                    <div class="notice-panel">
                        <h4 class="color-primary text-center">未读通知</h4>
                        <div class="notice-list">
                            <el-empty
                                :image-size="100"
                                description="暂无数据"
                            />
                        </div>
                    </div>
                </el-popover>
                <el-dropdown
                    ref="dropdown1"
                    trigger="hover"
                    @command="onDropMenuClick"
                >
                    <div class="d-flex">
                        <el-avatar :size="30"
                            ><i class="icon fs-30" style="color: #3c4965"
                                >&#xe8a8;</i
                            ></el-avatar
                        >
                        <!-- <div class="icon">&#xe8a8;</div> -->
                        <span class="el-dropdown-link pointer ml-10">
                            {{ userStore.userInfo.userName }}
                        </span>
                    </div>

                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item
                                icon="SwitchButton"
                                divided
                                command="exit"
                                @click="exitAction"
                            >
                                退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container style="overflow: auto">
            <el-aside
                class="page-aside"
                :style="{ width: `${isMenuCollapse ? 65 : 180}px` }"
            >
                <el-menu
                    :default-active="defaultActive"
                    class="page-menu"
                    :collapse="isMenuCollapse"
                    :unique-opened="true"
                    @open="onMenuOpen"
                    @close="onMenuClose"
                    @select="onMenuSelect"
                >
                    <template v-for="(item, index) in sideMenu">
                        <el-sub-menu
                            :index="item.id"
                            v-if="item.children && item.children.length > 0"
                            :key="index"
                            :disabled="
                                item.name == '视频分析' &&
                                !accessControl('video_analysis')
                            "
                        >
                            <template #title>
                                <!-- <el-icon>
                                    <component :is="item.icon"></component>
                                </el-icon> -->
                                <i
                                    :class="`icon iconf-${item.icon}`"
                                    v-if="item.type"
                                ></i>
                                <i
                                    :class="`iconfont icon-${item.icon}`"
                                    v-else
                                ></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item
                                :index="subItem.path"
                                v-for="subItem in item.children"
                                :key="subItem.path"
                            >
                                <!-- <el-icon>
                                    <component :is="subItem.icon"></component>
                                </el-icon> -->
                                <i
                                    :class="`icon iconf-${subItem.icon}`"
                                    v-if="subItem.type"
                                ></i>
                                <i
                                    :class="`iconfont icon-${subItem.icon}`"
                                    v-else
                                ></i>
                                {{ subItem.name }}
                            </el-menu-item>
                        </el-sub-menu>

                        <el-menu-item
                            :index="item.path"
                            :key="item.path"
                            v-else
                        >
                            <!-- <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon> -->
                            <i
                                :class="`icon iconf-${item.icon}`"
                                v-if="item.type"
                            ></i>
                            <i :class="`iconfont icon-${item.icon}`" v-else></i>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
                <div class="aside-bottom">
                    <!-- <el-color-picker
                        style="margin-top: 20px"
                        v-model="systeamColor"
                        @change="colorChange"
                    /> -->
                    <el-icon @click="isMenuCollapse = !isMenuCollapse">
                        <Expand v-if="isMenuCollapse" />
                        <Fold v-else />
                    </el-icon>
                </div>
            </el-aside>
            <el-main class="page-main">
                <div
                    class="main-header d-flex d-flex-between"
                    v-if="activeHeaderMenu.id !== 'pluginmall'"
                >
                    <el-breadcrumb
                        separator="/"
                        v-if="
                            activeHeaderMenu.id == 'fireControl' ||
                            activeHeaderMenu.id == 'safe' ||
                            activeHeaderMenu.id == 'energy'
                        "
                    >
                        <el-breadcrumb-item class="color-gray">
                            {{ activeHeaderMenu.name }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="activeMenu">
                            {{ activeMenu.name }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item
                            class="pointer fw-b"
                            v-if="route.meta.parentName"
                            @click="() => $router.go(-1)"
                        >
                            {{ route.meta.parentName }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            {{ route.meta.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-breadcrumb separator="/" v-else>
                        <el-breadcrumb-item class="color-gray">
                            {{ activeHeaderMenu.name }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="route.meta.grandParentName">
                            {{ route.meta.grandParentName }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="route.meta.parentName">
                            {{ route.meta.parentName }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            {{ route.meta.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <span title="设置">
                        <el-icon size="20" @click="settingDrawer = true">
                            <Tools />
                        </el-icon>
                    </span>
                </div>
                <div class="main-blk">
                    <RouterView></RouterView>
                </div>
                <div class="copyright">
                    版权所有©️极智科技(山东)有限公司 2022-2023
                </div>
            </el-main>
        </el-container>
    </el-container>
    <el-drawer v-model="settingDrawer" size="17%" title="设置">
        <el-divider>主题</el-divider>
        <div class="dflex d-flex-center">
            <el-switch
                @change="changeTheme"
                size="large"
                v-model="settingModel"
                :active-icon="Sunny"
                :inactive-icon="Moon"
                inline-prompt
                class="mt-2"
            ></el-switch>
        </div>
        <el-divider>主题色</el-divider>
        <div class="dflex d-flex-center">
            <el-color-picker
                v-model="color"
                size="large"
                @change="colorChange"
            />
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped>
:deep(.el-divider__text) {
    font-size: 16px;
    font-weight: 700;
}
:deep(.el-switch__inner) {
    left: 45% !important;
}
:deep(.el-icon) {
    font-size: 14px !important;
}
::v-deep(.el-menu) {
    border-right: none !important;
}
.page-layout {
    background: v-bind('themeColor');
}
.page-header {
    position: relative;
    z-index: 2;
    height: 48px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: var(--el-bg-color-overlay);
    display: flex;
    align-items: center;
    .title {
        min-width: 180px;
        font-weight: bold;
        font-size: 18px;
    }
    .header-menu {
        flex: 1;
        display: flex;
        height: 100%;
        .el-menu-item.is-active {
            border-right: none;
        }
        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            margin-right: 20px;
            // padding: 0 5px;
            border-bottom: 3px solid var(--el-bg-color-overlay);
            // cursor: pointer;
            // cursor: not-allowed;
            .text {
                margin-left: 5px;
            }
            &.active {
                color: var(--el-color-primary);
                border-color: var(--el-color-primary);
            }
        }
    }
}
.notice-panel {
    h4 {
        font-weight: bold;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
}
.page-aside {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--el-bg-color-overlay);
    width: 200px;
    transition: all linear 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    .page-menu {
        flex: 1;
        border: none;
        .iconfont,
        .icon {
            width: 16px;
            margin-right: 10px;
            text-align: center;
        }
    }
    .aside-bottom {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 40px;
        border-top: 1px solid #eee;
    }
}
.main-header {
    padding: 20px;
    background: var(--el-bg-color-overlay);
}
.page-main {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: auto;
    .main-blk {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin: 20px;
        overflow: hidden;
    }
}
.copyright {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding-bottom: 10px;
}
</style>
